<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <el-descriptions direction="vertical" border style="margin-top: 20px">
          <el-descriptions-item
            :rowspan="2"
            :width="140"
            label="头像"
            align="center"
          >
            <el-image
              style="width: 100px; height: 100px"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </el-descriptions-item>
          <el-descriptions-item label="用户名"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="手机号"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item label="地址">Suzhou</el-descriptions-item>
          <el-descriptions-item label="个人标签">
            <el-tag size="small">School</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="地址">
            No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="mt">
        <el-calendar v-model="value" />
      </el-card>
      <el-card class="mt">
        <template #header>
          <span>完善个人资料</span>
        </template>
        <el-row :gutter="10">
          <el-col :span="16">
            <StepForm
              :steps="steps"
              :formRef1="formRef1"
              :formRef2="formRef2"
              @submit="submit"
            >
              <template #step1>
                <el-form
                  :model="form.basicInfo"
                  label-width="100px"
                  ref="formRef1"
                >
                  <el-form-item label="用户名">
                    <el-input v-model="form.basicInfo.name" />
                  </el-form-item>
                  <el-form-item label="电话">
                    <el-input v-model="form.basicInfo.tel" />
                  </el-form-item>
                  <el-form-item label="地址">
                    <el-input v-model="form.basicInfo.address" />
                  </el-form-item>
                </el-form>
              </template>
              <template #step2>
                <el-form :model="form.job" label-width="100px" ref="formRef2">
                  <el-form-item label="用户名">
                    <el-select
                      v-model="form.job.status"
                      placeholder="请选择在职状态"
                    >
                      <el-option label="工作中" value="1"></el-option>
                      <el-option label="请假中" value="2"></el-option>
                      <el-option label="出差中" value="3"></el-option>
                      <el-option label="年假中" value="4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </template>
            </StepForm>
          </el-col>
          <el-col :span="8">
            <div class="mb" style="text-align: center">资料完善度</div>
            <el-progress :percentage="50" type="circle" />
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="mt">
        <el-badge :value="12" class="mr">
          <el-button>待办事项</el-button>
        </el-badge>
        <el-badge :value="3" class="mr">
          <el-button>replies</el-button>
        </el-badge>
        <el-badge :value="1" class="mr" type="primary">
          <el-button>comments</el-button>
        </el-badge>
        <el-badge :value="2" class="mr" type="warning">
          <el-button>replies</el-button>
        </el-badge>
      </el-card>
      <el-card>
        <el-collapse>
          <el-collapse-item
            title="账号注销通知"
            v-for="item in 10"
            :key="item"
            :name="item"
          >
            <div style="display: flex; justify-content: space-between">
              <h3>员工离职,账号需要注销,请及时处理!</h3>
              <el-button type="primary" size="small" class="mr"
                >去处理</el-button
              >
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import StepForm from '@/components/stepForm/StepForm.vue';
const value = ref<Date>(new Date());
const steps = [{ title: '基本信息' }, { title: '联系方式' }];
const formRef1 = ref();
const formRef2 = ref();
const form = ref({
  basicInfo: {
    name: '',
    address: '',
    tel: '',
  },
  job: {
    status: '',
  },
});

const submit = () => {
  console.log(form.value);
};
</script>
